<template>
	<view class="local-guide-page">
		<!-- 头部背景、标题和搜索栏 -->
		<u-sticky>
			<view class="header-section">
				<!-- <image class="header-bg" src="@/static/index/featured/bdxd_bg.png" mode="widthFix"></image> -->
				<!-- <view class="goBack" @click="goBack()">
					<u-icon name="arrow-left" size="22"></u-icon>
				</view> -->

				<view class="LocalWizardLogo">
					<image src="/static/index/local-guide/LocalWizardLogo.png" mode=""></image>
				</view>
				<view class="LocalWizardText">
					<image src="/static/index/local-guide/LocalWizardText.png" mode=""></image>
				</view>
				<view class="header-content">
					<view class="top-bar">
						<view class="page-title" @click="navigateToCitySelect">
							<text>{{cityName}}</text>
							<u-icon name="/static/index/featured/icon_down.png" color="#2D2E29" size="12" bold
								customStyle="margin-left: 4rpx;"></u-icon>
						</view>
						<view class="how-to-link">
							<u-icon name="info-circle" color="#000" size="16"></u-icon>
							<text>如何成为本地向导?</text>
						</view>
					</view>
					<text class="page-subtitle">
						<!-- 吃喝玩乐不踩雷~ -->
					</text>
					<view class="search-bar">
						<!-- 
						<text class="search-placeholder">定制属于你的专属旅程</text>
						<view class="search-button">
							<text>去定制</text>
							<u-icon name="arrow-right" color="#fff" size="14" bold></u-icon>
						</view> -->
						<!-- #ifndef APP-NVUE -->
						<u-input placeholder="请输入向导名称" border="none" v-model="searchVal">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="请输入向导名称" border="none" v-model="searchVal">
							<!-- #endif -->
								<u-icon slot="prefix" name="search" color="rgba(77, 77, 86, 1)" size="26"></u-icon>
								<template slot="suffix">
									<view class="suffix" @click="fetchGuides">
										去查找
									</view>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</u-sticky>


		<!-- Swiper轮播组件 -->
		<view class="swiper-container">
			<u-swiper :list="swiperList" keyName="image" height="120" :autoplay="true" circular radius="10"
				imgMode="aspectFill" indicator indicatorMode="dot" indicatorActiveColor="#ffaa0c"
				indicatorInactiveColor="rgba(255, 255, 255, 0.5)"></u-swiper>
		</view>


		<!-- 筛选和Tab栏 -->

		<u-sticky offset-top="175">
			<view class="filter-bar">
				<view class="tabs">
					<view v-for="(tab, index) in tabList" :key="index" class="tab-item"
						:class="{ active: currentTab === index }" @click="handleTabChange(index)">
						{{ tab.name }}
						<!-- 当前选中的tab显示下划线图片 -->
						<view v-if="currentTab === index" class="tab-active-line">

						</view>
					</view>
				</view>
				<view class="actions" v-show="currentTab == 0">
					<view class="action-item" @click="showFilterPopup = true">
						<u-icon name="/static/index/featured/icon_sx.png" color="#333" size="18"></u-icon>
						<text>筛选</text>
					</view>
					<!-- 	<view class="action-item" @click="navigateToCitySelect">
						<text>{{cityName}}</text>
						<u-icon name="/static/index/featured/icon_down.png" color="#2D2E29" size="12" bold
							customStyle="margin-left: 4rpx;"></u-icon>
					</view> -->
				</view>
			</view>
		</u-sticky>


		<!-- 向导列表 -->
		<view class="guide-list-container">
			<view v-for="(guide,index) in guideList" :key="index" class="guide-card" @click="handleDetail(guide)">
				<image class="guide-avatar" :src="guide.avatar" mode="aspectFill"></image>
				<view class="guide-info">
					<view class="info-header">
						<view class="name-line">
							<text class="name">{{ guide.nickName }}</text>
							<view class="gender-age" :class="{
							          'male': guide.ext1 == '1',
							          'female': guide.ext1 == '2', 
							          'unlimited': !guide.ext1 || guide.ext1 == '0'
							      }">
								<u-icon v-if="guide.ext1 && guide.ext1 != '0'"
									:name="guide.ext1 == '2' ? 'woman' : 'man'"
									:color="guide.ext1 == '2' ? '#F07AB3' : '#39B1FB'" size="14">
								</u-icon>
								<text>{{ guide.ext2 }}</text>
							</view>
						</view>
						<view v-if="guide.isLine == 1" class="online-status">
							<view class="dot"></view>
							<text>在线</text>
						</view>
					</view>

					<view class="info-row stats-row">
						<view class="stat-tag" v-if="guide.years"><u-icon name="/static/index/featured/icon_rz.png"
								size="20"></u-icon>
							入驻平台{{ guide.years }}年</view>
						<view class="stat-tag"
							v-if="guide.guideType == 1 || guide.guideType == 2 || guide.guideType == 3"><u-icon
								name="/static/index/featured/icon_cjxd.png" size="20"></u-icon>
							{{ guide.guideType == 1 ? '初级向导' : guide.guideType == 2 ? '中级向导' :guide.guideType == 3 ? '高级向导' : '' }}
						</view>
					</view>

					<view class="info-row rating-row" v-if="guide.localScore">
						<u-rate :value="guide.localScore" gutter="0" readonly size="20" activeColor="#ffaa00"></u-rate>
						<text class="rating-score">{{ guide.localScore.toFixed(1) }}</text>
						<text class="order-count">接单{{ guide.ordersNumber }}+次</text>
					</view>

					<view class="info-row tags-row" v-if="guide.guideTag">
						<!-- <view class="info-tag">{{ guide.starsign }}</view> -->
						<view class="info-tag" v-for="(tag, index) in guide.guideTag.split(',')" :key="index">
							{{ tag }}
						</view>
					</view>

					<view class="info-bio">
						{{ guide.ext4 }}
					</view>
				</view>
			</view>
		</view>
		<Tabbar :tabbar-index="1" />
		<!-- 筛选弹窗 -->
		<u-popup :show="showFilterPopup" mode="bottom" @close="showFilterPopup = false" :closeable="true" round="15">
			<view class="">
				<view class="popup-header">
					<view class="popup-header-middle">全部筛选</view>
				</view>
				<u-line color="rgba(41, 41, 48, 0.05)"></u-line>

				<view class="filter-popup">
					<view class="filter-section">
						<text class="filter-title">性别</text>
						<view class="filter-group">
							<view v-for="(item, index) in genderList" :key="index" class="filter-btn"
								:class="{ active: filters.gender === item.value }"
								@click="handleGenderSelect(item.value)">
								{{ item.label }}
							</view>
						</view>
					</view>

					<view class="filter-section">
						<text class="filter-title">年龄</text>
						<view class="filter-group">
							<view v-for="(item, index) in ageList" :key="index" class="filter-btn" :class="{ 
									active: filters.age === item, 
									'age-custom': index === 3 
								}" @click="handleAgeSelect(item, index)">
								<!-- 对于自定义年龄选项，不显示默认label -->
								<text v-if="index !== 3">{{ item.label }}</text>

								<!-- 自定义年龄选项显示输入框 -->
								<view v-if="index === 3" class="custom-age-inputs">
									<text class="age-start">18岁</text>
									<text class="age-connector">至</text>
									<input class="age-input" type="number" placeholder="自定义年龄" :value="customMaxAge"
										@input="onCustomAgeInput" @focus="handleCustomAgeFocus" inputAlign="center" />
								</view>
							</view>
						</view>
					</view>

					<view class="filter-section">
						<text class="filter-title">服务类型</text>
						<view class="filter-group">
							<view v-for="(item, index) in serviceTypeList" :key="index" class="filter-btn"
								:class="{ active: filters.serviceType === item.value }"
								@click="handleServiceSelect(item.value)">
								{{ item.label }}
							</view>
						</view>
					</view>

					<view class="filter-buttons">
						<u-button shape="circle" text="清空选择" @click="resetFilters" color="#666" plain></u-button>
						<u-button shape="circle" text="确定" color="#ffc640" customStyle="margin-left: 20rpx;"
							@click="applyFilters(filters)"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<PublishPopup :show="showPublishPopup" @close="showPublishPopup = false" />
	</view>
</template>

<script>
	import Tabbar from "@/components/tabbar/tabbar.vue";
	import {
		getByUserList,
		guideList,
		getClientUserByUserId
	} from '@/request/api.js';
	export default {
		components: {
			Tabbar,
		},
		data() {
			return {
				swiperList: [{
						image: '/static/index/featured/bdxd_banner.png'
					},
					{
						image: '/static/index/featured/bdxd_banner.png'
					},
				],
				tabList: [{
					name: '推荐'
				}, {
					name: '关注'
				}],
				currentTab: 0,
				// 模拟的向导数据
				recommendedGuides: [],
				followedGuides: [],
				showFilterPopup: false,
				showPublishPopup: false,
				isFetchingData: false, // 添加数据加载状态
				queryParams: {},
				genderList: [{
						label: '男',
						value: '1'
					},
					{
						label: '女',
						value: '2'
					},
					{
						label: '不限',
						value: '0'
					}
				],
				customMaxAge: '', // 自定义最大年龄
				ageList: [{
						label: '18~28岁',
						min: 18,
						max: 28
					},
					{
						label: '28~38岁',
						min: 28,
						max: 38
					},
					{
						label: '38~48岁',
						min: 38,
						max: 48
					},
					{
						label: '18岁-自定义年龄',
						min: 18,
						max: ''
					},
					{
						label: '不限',
						min: '',
						max: ''
					}
				],
				filters: {
					gender: '0',
					age: null, // 改为存储选中的ageList项
					serviceType: '0'
				},

				serviceTypeList: [{
						label: '预约地陪',
						value: '1'
					},
					{
						label: '定制攻略',
						value: '2'
					},
					{
						label: '实时咨询',
						value: '3'
					},
					{
						label: '不限',
						value: '0'
					}
				],
				searchVal: ''
			};
		},
		computed: {
			guideList() {
				// 根据当前Tab返回不同的数据列表
				return this.currentTab === 0 ? this.recommendedGuides : this.followedGuides;
			},
			cityName() {
				return this.$store.state.cityInfo.name
			},
		},
		onLoad() {
			this.fetchGuides();
			uni.$on('togglePublishPopup', this.handleTogglePublishPopup);
			// 初始化筛选条件，设置年龄为"不限"
			this.filters.age = this.ageList[4]; // 第5个选项是"不限"
		},
		onUnload() {
			uni.$off('togglePublishPopup', this.handleTogglePublishPopup);
		},
		onHide() {
			// 当页面被隐藏时（例如切换Tab），强制关闭弹窗
			this.showPublishPopup = false;
		},
		onBackPress(options) {
			// 优先关闭发布弹窗
			if (options.from === 'backbutton' && this.showPublishPopup) {
				this.showPublishPopup = false;
				return true;
			}
			return false;
		},
		methods: {
			async fetchGuides(isRefresh = false) {
				// 防止重复请求
				if (this.isFetchingData) return;

				this.isFetchingData = true;

				try {
					let params = {
						userId: this.$store.state.userInfo.userId,
					};

					if (this.currentTab === 0) {
						// 推荐向导列表
						params.guideStarts = 1;
						params.guideTag = this.queryParams.guideTag == 0 ? '' : this.queryParams.guideTag //服务类型
						params.ext1 = this.queryParams.ext1 == 0 ? '' : this.queryParams.ext1 //性别
						params.ext2 = this.queryParams.ext2 //年龄
						params.ext3 = this.queryParams.ext3 //年龄
						params.nickName = this.searchVal //向导名称
						const res = await guideList(params);
						if (res.data && res.data.code === 200) {
							this.recommendedGuides = res.data.rows || [];
						} else {
							throw new Error(res.data?.msg || '获取推荐向导失败');
						}
					} else if (this.currentTab === 1) {
						// 关注向导列表
						const res = await getClientUserByUserId(params);
						if (res.data && res.data.code === 200) {
							this.followedGuides = res.data.data || [];
						} else {
							throw new Error(res.data?.msg || '获取关注向导失败');
						}
					}
				} catch (error) {
					console.error('获取向导数据失败:', error);
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					});
				} finally {
					this.isFetchingData = false;
				}
			},

			handleTabChange(index) {
				// 避免重复点击同一Tab
				if (this.currentTab === index) return;

				this.currentTab = index;
				this.fetchGuides();
			},

			handleDetail(item) {
				let userId = item.userId
				// 将对象转换为 JSON 字符串，然后进行编码
				uni.navigateTo({
					url: `/pages_sub/guide/guide-detail?userId=` + userId
				});
			},

			handleTogglePublishPopup() {
				// 这里需要判断当前页面是否是活动页面，避免后台页面也响应事件
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				// 确保只有当前显示的页面才打开弹窗
				if (currentPage.route === 'pages/local-guide/local-guide') {
					this.showPublishPopup = !this.showPublishPopup;
				}
			},

			navigateToCitySelect() {
				uni.navigateTo({
					url: '/pages_sub/common/city/city-select'
				});
			},
			handleGenderSelect(value) {
				this.filters.gender = value;
			},
			handleAgeSelect(item, index) {
				// 如果是自定义年龄选项，设置自定义模式
				if (index === 3) {
					this.filters.age = item;
				} else {
					this.filters.age = item;
					// 如果选择的是非自定义选项，清空自定义输入
					if (index !== 3) {
						this.customMaxAge = '';
					}
				}
			},
			handleCustomAgeFocus() {
				// 输入框获得焦点时，自动选择自定义年龄选项
				this.filters.age = this.ageList[3];
			},

			onCustomAgeInput(event) {
				// 处理自定义年龄输入
				const value = event.detail.value;
				this.customMaxAge = value;
				// 更新自定义年龄选项的max值
				this.ageList[3].max = value;
			},
			handleServiceSelect(value) {
				this.filters.serviceType = value;
			},

			applyFilters(params) {
				let ageMin = '';
				let ageMax = '';
				if (params.age) {
					if (params.age === this.ageList[4]) { // 不限
						ageMin = ''; // 设置为空字符串表示不限
						ageMax = ''; // 设置为空字符串表示不限
					} else if (params.age === this.ageList[3]) { // 自定义年龄
						ageMin = 18;
						ageMax = this.customMaxAge
					} else { // 固定范围
						ageMin = params.age.min
						ageMax = params.age.max
					}
				}

				this.queryParams = {
					ext1: params.gender,
					ext2: ageMin,
					ext3: ageMax,
					guideTag: params.serviceType
				};
				this.fetchGuides();
				this.showFilterPopup = false;
			},

			// 重置筛选时也要重置自定义年龄
			resetFilters() {
				this.filters = {
					gender: '0', // 重置为不限
					age: this.ageList[4], // 重置为不限选项
					serviceType: '0' // 重置为不限
				};
				this.customMaxAge = '';
				this.ageList[3].max = ''; // 重置自定义年龄的max值
			},

			goBack() {
				uni.navigateBack();
			},

			// 下拉刷新支持（如果需要）
			onPullDownRefresh() {
				this.fetchGuides(true).finally(() => {
					uni.stopPullDownRefresh();
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.local-guide-page {
		background-color: #FCFFFF;
		min-height: 100vh;
	}

	.header-section {
		position: relative;
		width: 100%;
		background: linear-gradient(to bottom, rgba(222, 255, 130, 1), rgba(251, 255, 255, 1));

		.goBack {
			width: 100%;
			height: 40rpx;
			position: absolute;
			top: 80rpx;
			left: 30rpx;
			z-index: 100;
		}


		.LocalWizardLogo {
			position: absolute;
			top: 150rpx;
			left: 170rpx;
			z-index: 100;

			image {
				width: 514rpx;
				height: 160rpx;
			}
		}

		.LocalWizardText {
			position: absolute;
			top: 160rpx;
			left: -10rpx;
			z-index: 100;

			image {
				width: 226rpx;
				height: 230rpx;
			}
		}

		.header-content {
			position: relative;
			z-index: 2;
			padding: 20rpx 30rpx 0;
			padding-top: calc(var(--status-bar-height) + 20rpx);

			.top-bar {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.page-title {
					display: flex;
					font-weight: bold;
				}

				.how-to-link {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #333;
					// background-color: rgba(255, 255, 255, 0.7);
					padding: 8rpx 16rpx;
					border-radius: 20rpx;

					text {
						margin-left: 8rpx;
					}
				}
			}

			.page-subtitle {
				font-size: 32rpx;
				font-weight: bold;
				color: #000;
				margin-top: 8rpx;
				display: block;
			}

			.search-bar {
				position: sticky;
				display: flex;
				align-items: center;
				background-color: #fff;
				border-radius: 40rpx;
				padding: 4rpx 4rpx 4rpx 16rpx;
				margin: 240rpx 80rpx 0 80rpx;
				z-index: 998;
				/* #ifdef APP */
				margin: 220rpx 60rpx 0 60rpx;
				/* #endif */
				border: 1rpx solid #464646;
				height: 62rpx;

				.suffix {
					background-color: rgba(255, 201, 101, 1);
					width: 140rpx;
					height: 62rpx;
					line-height: 62rpx;
					text-align: center;
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: bold;
				}

				.search-placeholder {
					flex: 1;
					margin-left: 4rpx;
					color: #666;
					font-size: 28rpx;
				}

				.search-button {
					display: flex;
					align-items: center;
					background-color: #FEAB0F;
					padding: 10rpx 24rpx;
					border-radius: 30rpx;
					color: #fff;
					font-weight: bold;
					box-shadow: 0 4rpx 12rpx rgba(255, 198, 64, 0.4);

					text {
						margin-right: 4rpx;
					}
				}
			}
		}
	}

	.swiper-container {
		margin-top: 20rpx;
		padding: 20rpx 30rpx;
		position: relative;
		z-index: 2;
	}

	.filter-bar {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
		z-index: 2;

		.tabs {
			display: flex;
			align-items: center;

			.tab-item {
				font-size: 30rpx;
				color: #666;
				margin-right: 40rpx;
				padding-bottom: 20rpx;
				/* 给下划线留出空间 */
				position: relative;
				transition: all 0.3s;
				display: flex;
				flex-direction: column;
				align-items: center;
				/* 内容居中 */

				&.active {
					font-size: 34rpx;
					font-weight: bold;
					color: #000;
				}

				.tab-text {
					white-space: nowrap;
					/* 防止文字换行 */
				}

				// 选中tab的下划线样式
				.tab-active-line {
					z-index: -1;
					position: absolute;
					bottom: 20rpx;
					background: linear-gradient(to right,
							rgba(255, 170, 12, 1),
							rgba(250, 225, 62, 1));
					height: 16rpx;
					width: 80%;
					/* 与文字宽度相同 */
					border-radius: 10rpx;
				}
			}
		}

		.actions {
			display: flex;
			align-items: center;

			.action-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #333;
				margin-left: 30rpx;

				text {
					margin-left: 4rpx;
				}
			}
		}
	}

	.guide-list-container {
		padding: 0 30rpx;
		padding-bottom: 40rpx;
		margin-top: 50rpx;
		position: relative;
		z-index: 2;
	}

	.guide-card {
		position: relative;
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 20rpx 0 20rpx;
		padding-left: 240rpx;
		margin-bottom: 60rpx;
		min-height: 230rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.06);

		.guide-avatar {
			position: absolute;
			top: -35rpx;
			left: 20rpx;
			width: 200rpx;
			height: 255rpx;
			background-color: #000;
			border-radius: 20rpx;
		}

		.guide-info {
			width: 100%;
			display: flex;
			flex-direction: column;

			.info-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.name-line {
					display: flex;
					align-items: center;

					.name {
						font-size: 34rpx;
						font-weight: bold;
						color: #000;
					}

					.gender-age {
						display: flex;
						align-items: center;
						font-size: 22rpx;
						padding: 4rpx 10rpx;
						border-radius: 20rpx;
						margin-left: 16rpx;
						font-weight: 700;

						&.female {
							background-color: #FBF0F4;
							color: #F07AB3;
						}

						&.male {
							background-color: #D2EBFA;
							color: #39B1FB;
						}

						&.unlimited {
							background-color: #f8f8f8;
							color: #ccc;
						}

						text {
							margin-left: 4rpx;
						}
					}
				}

				.online-status {
					display: flex;
					align-items: center;
					font-size: 22rpx;
					color: #000;

					.dot {
						width: 18rpx;
						height: 18rpx;
						background-color: #74CD26;
						border-radius: 50%;
						margin-right: 8rpx;
					}
				}
			}

			.info-row {
				display: flex;
				align-items: center;
				margin-top: 6rpx;
			}

			.stats-row {
				.stat-tag {
					display: flex;
					align-items: center;
					font-size: 22rpx;
					background-color: #f5f5f5;
					color: #000;
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
					margin-right: 12rpx;

					.u-icon {
						margin-right: 6rpx;
					}
				}
			}

			.rating-row {
				font-size: 24rpx;

				.rating-score {
					// font-weight: bold;
					color: #000;
					margin: 0 12rpx;
				}

				.order-count {
					color: #000;
				}
			}

			.tags-row {
				display: flex;
				flex-wrap: nowrap; // 不换行
				overflow: hidden; // 超出隐藏

				.info-tag {
					font-size: 22rpx;
					color: #999;
					border-radius: 20rpx;
					flex: 0 0 auto; // 不放大，不缩小，保持原始尺寸
					margin-right: 12rpx;
					white-space: nowrap; // 文字不换行
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 200rpx; // 限制最大宽度

					&:last-child {
						margin-right: 0; // 最后一个元素不需要右边距
					}
				}
			}

			.info-bio {
				font-size: 26rpx;
				color: #333;
				margin-top: 8rpx;
				// 多行文本溢出省略
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}


	.popup-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		line-height: 100rpx;

		.popup-header-middle {
			font-weight: bold;
			font-size: 32rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}

		.popup-header-right {
			width: 32rpx;
			height: 32rpx;
			margin-left: auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.filter-popup {
		padding: 30rpx;

		.filter-section {
			margin-bottom: 50rpx;

			.filter-title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
				display: block;
				color: #333;
			}

			.filter-group {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;

				.filter-btn {
					font-size: 26rpx;
					color: #333;
					background-color: #f5f5f5;
					border-radius: 12rpx;
					padding: 16rpx 0;
					cursor: pointer;
					white-space: nowrap;
					transition: all 0.3s;
					text-align: center;
					box-sizing: border-box;
					flex: 0 0 calc(33.33% - 14rpx);
					position: relative;

					&.active {
						background-color: rgba(255, 228, 217, 1) !important;
						color: rgba(254, 119, 46, 1) !important;
					}

					/* 自定义年龄选项特殊样式 */
					&.age-custom {
						flex: 0 0 calc(((100% - 40rpx) / 3) * 2 + 20rpx);
						padding: 0;

						/* 隐藏默认的label文字 */
						&:not(.active) {
							color: transparent;
						}

						&.active {
							.custom-age-inputs {

								.age-start,
								.age-connector,
								.age-unit {
									color: rgba(254, 119, 46, 1);
								}

								.age-input {
									color: rgba(254, 119, 46, 1);

									&::placeholder {
										color: rgba(255, 255, 255, 0.7);
									}
								}
							}
						}

						.custom-age-inputs {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;

							.age-start {
								width: 33.33%;
								font-size: 26rpx;
								color: #333;
							}

							.age-connector {
								font-size: 24rpx;
								color: #999;
								margin: 0 10rpx;
							}

							.age-input {
								width: 33.33%;
								/* 加宽以显示placeholder */
								height: 40rpx;
								text-align: center;
								font-size: 26rpx;
								color: #333;
								background-color: transparent;
								border: none;
								outline: none;

								&::placeholder {
									color: #999;
									font-size: 24rpx;
									content: "自定义年龄";
								}
							}

							.age-unit {
								font-size: 24rpx;
								color: #333;
								margin-left: 4rpx;
							}
						}
					}
				}

				/* 自定义年龄输入区域 */
				.custom-age-inputs {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;

					.age-start {
						font-size: 26rpx;
						color: #333;
					}

					.age-connector {
						font-size: 24rpx;
						color: #999;
						margin: 0 10rpx;
					}

					.age-input {
						width: 80rpx;
						height: 40rpx;
						text-align: center;
						font-size: 26rpx;
						color: #333;
						background-color: transparent;
						border: none;
						outline: none;

						&::placeholder {
							color: #999;
							font-size: 24rpx;
						}
					}

					.age-unit {
						font-size: 24rpx;
						color: #333;
						margin-left: 4rpx;
					}
				}
			}
		}

		.filter-buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			::v-deep .u-button {
				flex: 1;
				height: 80rpx;
				font-size: 30rpx;
				font-weight: bold;

				&:first-child {
					background-color: #f5f5f5;
					color: #666;
					border: none;
				}
			}
		}
	}
</style>